<template>
    <div class="dragDemo">
        <!--列表1-->
        <draggable class="list-group"
                   :options="dragOptions1">
            <div>
               test表单：<input type="" name="" />
            </div>
            <div>
               <button>test按钮</button>
            </div>
        </draggable>
        <!--列表2-->
        <draggable class="list-group"
                   :options="dragOptions2"
      >
            <vue-draggable-resizable>
               {{centerCanvas}}
            </vue-draggable-resizable>
        </draggable>
    </div>
</template>

<script>
    import draggable from "vuedraggable";
    import VueDraggableResizable from 'vue-draggable-resizable'
    import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

    export default{
        name:'dragDemo',
        components:{
            draggable,
            VueDraggableResizable
        },
        data(){
            return{
                centerCanvas:''
                // listLeft:[{
                //     name:'数据一',
                //     value:'1'
                // },{
                //     name:'数据二',
                //     value:'2'
                // },{
                //     name:'数据三',
                //     value:'3'
                // },{
                //     name:'数据四',
                //     value:'4'
                // },{
                //     name:'数据五',
                //     value:'5'
                // }],
                // listRight:[]
            }
        },
        computed: {
            dragOptions1() {
                return {
                    group: {
                        name: "description", // 多容器拖拽name必须相同
                        pull: 'clone',         // 克隆 、拖拽
                        put: false              //是否克隆到本身
                    }
                };
            },
            dragOptions2(){
                return {
                    group: "description"
                };
            }
        }
    }
</script>

<style scoped lang="scss" rel="stylesheet/scss">
   .dragDemo{
       margin-top:50px;
       display: flex;
       justify-content: center;
       color: #555;
       .list-group{
           width: 300px;
           border: 1px solid #ddd;
           text-align: center;
           margin-right: 50px;
           >div{
               padding:10px;
               border-bottom:1px dashed #ddd;
               img{
                   width:25px;
                   height:25px;
                   vertical-align: middle;
                   padding-right:10px;
               }
           }
       }
   }
</style>